<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
    <script type="text/javascript" src="vue.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
</head>
<body>
<div id="app">
    <div>
        <el-select placeholder="区域名称" v-model="info.name">
            <el-option label="" value="">所有</el-option>
            <el-option v-for="(m,i) in getAreaArr" :label="m.aname" :value="m.id"></el-option>
        </el-select>
        <el-input type="date" v-model="info.mindate" placeholder="最早日期" style="display: inline-block; width: 200px;"></el-input>
        <el-input type="date" v-model="info.maxdate" placeholder="最晚日期" style="display: inline-block; width: 200px;"></el-input>
        <el-button icon="el-icon-search" circle @click="searchData()"></el-button>
        <el-button type="primary" icon="el-icon-plus" circle @click="showAddMarDlog()"></el-button>
    </div>
    <el-table
            :data="marketArr"
            border
            style="width: 100%">
        <el-table-column
                prop="id"
                label="编号"
                width="180">
        </el-table-column>
        <el-table-column
                prop="mname"
                label="市场名称">
        </el-table-column>
        <el-table-column
                prop="location"
                label="市场地址">
        </el-table-column>
        <el-table-column
                prop="startdate"
                label="创建日期">
        </el-table-column>
        <el-table-column
                prop="area.aname"
                label="区域名称">
        </el-table-column>
        <el-table-column
                prop="s.name"
                label="市场状态">
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
                <el-button type="text" @click="showUpdateMarDlog(scope.row.id)">编辑</el-button>
            </template>
        </el-table-column>
    </el-table>

    <el-pagination
            @current-change="handleCurrentChange"
            background
            layout="prev, pager, next"
            :total="pageTotal">
    </el-pagination>

    <el-dialog
            title="添加市场"
            :visible.sync="addMarVisible"
            width="30%"
            center="true">
        <el-form :model="marketInfo" status-icon :rules="rules" ref="marketInfo" label-width="100px" class="demo-ruleForm">
            <el-form-item label="市场名称" prop="mname">
                <el-input v-model="marketInfo.mname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市场地址" prop="location">
                <el-input v-model="marketInfo.location" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="创建日期" prop="startdate">
                <el-input type="date" v-model="marketInfo.startdate" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-form-item label="市场状态" prop="state">
                <el-select v-model="marketInfo.state" placeholder="请选择市场状态">
                    <el-option v-for="(s,i) in stateArr" :label="s.name" :value="s.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="市场区域" prop="aid">
                <el-select v-model="marketInfo.aid" placeholder="请选择市场区域">
                    <el-option v-for="(a,i) in areaArr" :label="a.aname" :value="a.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
			      <el-button @click="addMarVisible=false">取 消</el-button>
			      <el-button type="primary" @click="addMar()">确 定</el-button>
			    </span>
    </el-dialog>

    <el-dialog
            title="编辑市场"
            :visible.sync="updateMarVisible"
            width="30%"
            center="true">
        <el-form :model="upadteMarketInfo" status-icon :rules="rules" ref="upadteMarketInfo" label-width="100px" class="demo-ruleForm">
            <input v-model="upadteMarketInfo.id" type="hidden"/>
            <el-form-item label="市场名称" prop="mname">
                <el-input v-model="upadteMarketInfo.mname" autocomplete="off"></el-input>
            </el-form-item>
            <el-form-item label="市场地址" prop="location">
                <el-input v-model="upadteMarketInfo.location" autocomplete="off"></el-input>
            </el-form-item>
            <!--<el-form-item label="创建日期" prop="startdate">
                <el-input type="date" v-model="upadteMarketInfo.startdate" autocomplete="off"></el-input>
            </el-form-item>-->
            <el-form-item label="市场状态" prop="state">
                <el-select v-model="upadteMarketInfo.state" placeholder="请选择市场状态">
                    <el-option v-for="(s,i) in stateArr" :label="s.name" :value="s.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="市场区域" prop="aid">
                <el-select v-model="upadteMarketInfo.aid" placeholder="请选择市场区域">
                    <el-option v-for="(a,i) in areaArr" :label="a.aname" :value="a.id"></el-option>
                </el-select>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
			      <el-button @click="updateMarVisible=false">取 消</el-button>
			      <el-button type="primary" @click="updateMar()">确 定</el-button>
			    </span>
    </el-dialog>

</div>

<script>
    $.get("/cai/mar/getArea",function (backData) {
        app.getAreaArr = backData.data;
    })
    var app = new Vue({
        el:"#app",
        data:{
            info:{},
            pageTotal:0,
            marketArr:[],
            getAreaArr:[],
            marketInfo:{},
            areaArr:[],
            stateArr:[],
            addMarVisible:false,
            updateMarVisible:false,
            upadteMarketInfo:{},
            rules:{
                mname: [
                    { required: true, message: '请输入市场名称', trigger: 'blur' },
                    {pattern: /^[\u4e00-\u9fa5]+$/,message: '请输入中文',trigger: 'blur'}
                ],
                location: [
                    { required: true, message: '请输入市场地址', trigger: 'blur' },
                    {pattern: /^[\u4e00-\u9fa5]+$/,message: '请输入中文',trigger: 'blur'}
                ]
            }
        },
        methods:{
            searchData:function () {
                getInfo(1,10);
            },
            handleCurrentChange:function(val){
                getInfo(val,10);
            },
            showUpdateMarDlog:function(a){
                $.get("/cai/mar/getOneMarket/"+a,function (marBackData) {
                    $.get("/cai/mar/getArea",function (areaBackData) {
                        $.get("/cai/mar/getState",function (stateBackData) {
                            app.areaArr = areaBackData.data;
                            app.stateArr = stateBackData.data;
                            app.upadteMarketInfo = marBackData.data;
                            app.updateMarVisible = true;
                        })
                    });
                })
            },
            updateMar:function(){
                app.$refs["upadteMarketInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/mar/updateMarket",app.upadteMarketInfo,function (backData) {
                            if(backData.code == 1){
                                app.$notify({
                                    title: '成功提示',
                                    message: backData.msg,
                                    type: 'success'
                                });
                                app.updateMarVisible = false;
                                getInfo(1,10);
                            }else {
                                app.$notify.error({
                                    title: '错误提示',
                                    message: backData.msg
                                });
                            }
                        });
                    }
                });
            },
            showAddMarDlog:function () {
                //获取区域信息
                $.get("/cai/mar/getArea",function (backData) {
                    app.areaArr = backData.data;
                })
                //获取状态信息
                $.get("/cai/mar/getState",function (backData) {
                    app.stateArr = backData.data;
                })
                //将弹框展示出来
                app.addMarVisible = true;
                app.$refs["marketInfo"].resetFields();
            },
            addMar:function () {
                app.$refs["marketInfo"].validate((valid) => {
                    if (valid) {
                        $.post("/cai/mar/addMarket",app.marketInfo,function (backData) {
                            if(backData.code == 1){
                                app.$notify({
                                    title: '成功提示',
                                    message: backData.msg,
                                    type: 'success'
                                });
                                app.addMarVisible = false;
                                getInfo(1,10);
                            }else {
                                app.$notify.error({
                                    title: '错误提示',
                                    message: backData.msg
                                });
                            }
                        });
                    }
                });
            }
        }
    });

    function getInfo(a,b) {
        app.info.pageNo = a;
        app.info.pageCount = b;
        $.post("/cai/mar/list",app.info,function(backData){
            app.marketArr = backData.data.currentPageData;
            app.pageTotal = backData.data.currentDataTotal;
        });
    }
    getInfo(1,10);
</script>
</body>
</html>